<template>
	<view @touchmove="handleTouchMove">
		<!-- 顶部标题栏 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" :class="{ 'active': currentTab === index }"
				@click="switchTab(index)">
				{{ tab }}
				<view class="underline" v-show="currentTab === index"></view>
			</view>
		</view>

		<!-- 订单列表区域 -->
		<view class="order-list" @touchmove="handleTouchMove">
			<view style="display: flex;justify-content: center;align-items: center;"  v-if="tableData.length === 0">暂无数据</view>
			<view v-else>
				<!-- 订单显示卡 -->
				<view class="order-card" v-for="(order,index) in tableData" :key="index">
			 		<!-- 上部分 -->
					<view class="order-header">
						<view class="order-number">{{"服务名称："+order.service_name}}</view>
						<view class="order-status">{{order.appointment_status}}</view>
					</view>

					<!-- 中间部分 -->
					<view class="order-content">
						<view class="content-up">
				 			<!-- 左侧图片区域 -->
							<view class="image-container"></view>
							<!-- 右侧标题和金额区域 -->
							<view class="title">{{order.pet_name}}</view>
						</view>
						<view class="amount">{{"下单时间："+order.appointment_date.slice(0,10)}}</view>
						<view class="amount">{{"预约时间："+order.appointment_time.slice(0,10)}}</view>
					</view>

					<!-- 下部分 -->
					<view class="order-footer">
						<view class="btn cancel-btn" v-if="order.appointment_status=='待服务'" @click="toCancel(order)">取消订单</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;" >已经是所有数据了</view>
			</view>
		</view>
	</view>
</template>


<script>
import config from '@/config/config.js'; // 引入全局配置文件

export default {
  data() {
    return {
      tabs: ['全部', '已预约', '已完成', '未完成'],
      currentTab: 0, // 默认选中全部订单
      startX: 0,
      moveX: 0,
      tableData: [],
      user: {}
    };
  },
  mounted() {
    this.getList(); // 页面加载时请求默认选项卡的订单数据
  },
  methods: {
    async getList() {
          const user = uni.getStorageSync('userInfo');
          this.user = user;
          let param;
          switch (this.currentTab) {
            case 0:
              param = 'getAllByUserId';
              break;
            case 1:
              param = 'getWaitServeByUserId';
              break;
            case 2:
              param = 'getCompletedByUserId';
              break;
            case 3:
              param = 'getIncompleteByUserId';
              break;
          }
          try {
            const res = await uni.request({
              url: config.baseURL + `/appointment/${param}/${user.user_id}`,
              method: 'GET',
              success: (res) => {
                this.tableData = res.data.data;
               
              }
            });
            
          } catch (error) {
            console.error('请求订单数据失败:', error);
          }
        },
		toCancel(order){
			uni.showModal({
				title: '提示：',
				content: '确认取消订单?',
				success: function(res) {
						if (res.confirm) {
							//确认取消的逻辑
							//先更新预约的状态
							uni.request({
								url:config.baseURL + `/appointment/update/${order.appointment_pkid}/3`,
								method:'GET',
								success: () => {
									//如果成功就拿这个数据的id去生成对应的服务记录
									uni.request({
										url:config.baseURL + `/appointment/get/${order.appointment_pkid}`,
										success: (res) => {
											let obj = res.data.data; //拿到原始数据
											//生成服务记录对象数据
											let serviceRecord = {
												user_id:obj.user_pkid, // 用户id通过此字段可以查询所有记录
												pet_id:obj.pet_id,// 宠物id
												appointment_id:obj.appointment_pkid, // 预约记录id
												project_id:obj.project_id,// 项目名称
												status:2, // 订单状态：1-完成，2-院方拒绝，3-用户取消
												is_medical:obj.is_medical//是否为医疗项目
											}
											uni.request({
												url:config.baseURL + `/serviceRecords/addServiceRecord`,
												method:'POST',
												data:serviceRecord,
												success: () => {
													getList();
													uni.showToast({
														title:"取消成功",
														icon:"success"
													})
												}
											})
										}
									})
								}
							})
						} else if (res.cancel) {
							return
							// console.log('取消');
							//TODO
						}
					}
				});
		},
    switchTab(index) {
      this.currentTab = index;
      this.getList(); // 切换选项卡时重新请求数据
    },
    handleTouchMove(event) {
      // 处理滑动事件
    },
    handleTouchStart(event) {
      this.startX = event.touches[0].pageX;
    }
  }
};
</script>


<style>
	/* 样式可根据实际需要进行调整 */
	.tab-bar {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}

	.tab-bar view {
		position: relative;
		font-size: 28rpx;
		color: #666;
	}

	.tab-bar .active {
		color: #000;
	}

	.underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 2px;
		background-color: #007aff;
		display: none;
		/* 默认隐藏 */
	}

	.active .underline {
		display: block;
		/* 选中时显示 */
	}

	.order-card {
		width: 98%;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 10rpx;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
	}

	.order-number,
	.order-status {
		font-size: 28rpx;
	}

	.order-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.content-up {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.image-container {
		width: 160rpx;
		height: 160rpx;
		background-color: #ccc;
		/* 图片占位背景色 */
	}

	.title {
		flex: 2;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 28rpx;
	}

	.amount {
		font-size: 28rpx;
		text-align: right;
		padding-right: 10rpx;
	}

	.order-footer {
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
	}

	.btn {
		padding: 10rpx 20rpx;
		background-color: #007bff;
		color: #ffffff;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}
</style>
